<template>
  <div class="toolDialogContainer" v-if="isToolDialogShow" v-drag>
    <div class="toolDialogTitle drag-handle">
      <div class="title-left">
        <div class="bar"></div>
        <div class="title-text">属性纠错上报</div>
      </div>
      <div class="title-right">
        <!-- <div  tabindex="0" class="icon">-</div> -->
        <div tabindex="0" class="icon" @click="closeDialog">×</div>
      </div>
    </div>
    <div class="toolDialogContent">
      <div class="contentButton">
        <div
          class="menuButton"
          :class="{ active: isReportShow }"
          @click="changeMenu('report')"
        >
          属性纠错上报
        </div>
        <div
          class="menuButton"
          :class="{ active: isListShow }"
          @click="changeMenu('list')"
        >
          属性纠错列表
        </div>
      </div>
      <div class="contentBox" v-show="isReportShow">
        <div class="formRow">
          <div class="label">纠错对象</div>
          <div class="control">
            <select v-model="targetOption" @change="targetSelect">
              <option
                v-for="item in suggestTargetList"
                :key="item.adviceObjId"
                :value="item.adviceObjId"
              >
                {{ item.adviceObjValue }}
              </option>
            </select>
          </div>
        </div>
        <div class="formRow">
          <div class="label">纠错内容</div>
          <div class="control">
            <select v-model="contentOption">
              <option
                v-for="item in targetContentList"
                :key="item.adviceContentId"
                :value="item.adviceContentId"
              >
                {{ item.adviceContentValue }}
              </option>
            </select>
          </div>
        </div>
        <div class="formRow">
          <div class="label">备注</div>
          <div class="control">
            <textarea rows="4" v-model="adviceNoteText"></textarea>
          </div>
        </div>
        <div class="formRow">
          <div class="label">区域标注：</div>
          <div class="control">
            <textarea
              readonly="true"
              rows="4"
              class="area-input"
              v-model="areaMarkText"
            ></textarea>
            <button class="pickup-btn" @click="getArea">拾取面</button>
          </div>
        </div>
        <div class="formRow formRowPoint">
          <div class="columnLabel">
            <div class="label">
              <div class="label_text">x:</div>
              <input
                type="text"
                class="coordinate-input"
                v-model="selectedCoordinates.lon"
              />
            </div>
            <div class="label">
              <div class="label_text">y:</div>
              <input
                type="text"
                class="coordinate-input"
                v-model="selectedCoordinates.lat"
              />
            </div>
          </div>
          <div class="control">
            <button class="pickup-btn pickup-btn1" @click="getPoint">
              拾取点
            </button>
          </div>
        </div>
        <div class="formRow">
          <div class="control">
            <button class="smallBtn" type="button" @click="resetAdvice">
              重置
            </button>
            <button class="smallBtn" type="button" @click="submitAdvice">
              上报
            </button>
          </div>
        </div>
      </div>
      <div class="contentBox" v-show="isListShow">
        <div class="formRow">
          <div class="search_label">快速检索</div>
        </div>
        <div class="formRow">
          <div class="search_input">
            <input
              type="text"
              class="searchContent"
              placeholder="请输入需要检索的关键字"
              v-model="searchKeyWords"
            />
          </div>
          <el-button
            style="width: 7rem"
            type="primary"
            icon="el-icon-search"
            @click="searchList"
          >
            查询
          </el-button>
        </div>
        <div class="formRow formRow1">
          <div class="search_label">纠错列表</div>
          <!-- <input
            type="checkbox"
            class="showAllList"
            @change="showAllAdviceList"
          />
          <label for="showAllList">显示全部</label> -->
        </div>
        <div class="formRow">
          <div class="control">
            <input
              type="radio"
              value="未处理"
              class="UnProcessed"
              v-model="processData"
            />
            <label for="showAllList"
              >未处理({{ UnProcessedAdviceTableData.length }})</label
            >
            <input
              type="radio"
              value="已处理"
              class="Processed"
              v-model="processData"
            />
            <label for="showAllList"
              >已处理({{ ProcessedAdviceTableData.length }})</label
            >
          </div>
        </div>
        <div class="formRow formTable">
          <div class="control">
            <div
              class="data-container"
              v-for="(item, index) in adviceTableData"
              :key="index"
              @click="showAreaPoint(item)"
            >
              <div class="data-item">
                {{ item.adviceObjValue }}
              </div>
              <div class="data-item">
                {{ item.adviceContentValue }}
              </div>
              <div class="delBtn">
                <!-- <button @click.stop="isDetailDialogShow = true">详情</button> -->
                <button @click.stop="delDetails(item)">删除</button>
              </div>
            </div>
          </div>
        </div>
        <div class="formRow">
          <div class="control">
            <button class="smallBtn" type="button" @click="resetTable">
              刷新
            </button>
            <button
              class="smallBtn"
              type="button"
              @click="isDetailDialogShow = true"
            >
              详情
            </button>
          </div>
        </div>
      </div>
    </div>
    <SuggestDetailDialog
      :dialogVisible="isDetailDialogShow"
      @update:dialogVisible="isDetailDialogShow = $event"
    ></SuggestDetailDialog>
  </div>
</template>

<script>
import SuggestDetailDialog from "./SuggestDetailDialog.vue";
import {
  getAttrErrorList,
  getAttrErrorContentList,
  saveAttrErrorContent,
  getFeedbackSuggestList,
  QueryFeedbackSuggestList,
  delAdviceFeedback,
} from "@/api/systemTool";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  components: { SuggestDetailDialog },
  data() {
    return {
      processData: "未处理",
      isDetailDialogShow: false,
      areaMarkText: "",
      adviceNoteText: "",
      geomData: null,
      isReportShow: true,
      isListShow: false,
      targetOption: "",
      contentOption: "",
      suggestTargetList: [],
      targetContentList: [],
      polygonLayer: null,
      map: null,
      searchKeyWords: "",
      selectedCoordinates: {
        lon: "", // 初始化为空字符串或你想要的默认值
        lat: "", // 初始化为空字符串或你想要的默认值
      },
      allAdviceTableData: [],
      ProcessedAdviceTableData: [],
      UnProcessedAdviceTableData: [],
      adviceTableData: [
        { item: "列1的内容1" },
        { item: "列1的内容2" },
        { item: "列1的内容3" },
      ],
      //属性纠错列表两列的值
      array1: ["列1的内容1", "列1的内容2", "列1的内容3"], // 第一个数组
      array2: ["列2的内容1", "列2的内容2", "列2的内容3"], // 第二个数组
    };
  },
  computed: {
    isToolDialogShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
    getGeom() {
      return this.$store.state.geom;
    },
  },
  watch: {
    getGeom(newVal) {
      this.geomData = newVal;
      this.areaMarkText = JSON.stringify(this.geomData.getCoordinates());
      // ) ,geomSum,'获取到的geom');
    },
    processData(newValue) {
      if (newValue == "未处理") {
        this.adviceTableData = this.UnProcessedAdviceTableData;
      } else if (newValue == "已处理") {
        this.adviceTableData = this.ProcessedAdviceTableData;
      }
    },
  },
  methods: {
    initMap() {
      setTimeout(() => {
        this.map = this.$store.getters.Map;
        if (this.map) {
        } else {
          console.error("地图实例未找到");
        }
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    delDetails(item) {
      delAdviceFeedback({ id: item.adviceFeedbackId }).then((res) => {
        this.$message.success("删除成功");
        this.processAdviceData();
        this.pointLayer.getSource().clear();
        this.polygonLayer.getSource().clear();
      });
    },
    showAreaPoint(item) {
      this.pointLayer.getSource().clear();
      this.polygonLayer.getSource().clear();
      if (item.feedbackPointerX && item.feedbackPointerY) {
        this.map.marker.addMarker(
          item.feedbackPointerX,
          item.feedbackPointerY,
          this.pointLayer,
          {
            scale: 0.5, //大小
            radius: 5,
            pBorderColor: "#000000",
            pBorderWidth: 1,
            pFillColor: "red",
          },
          item
        );
      }
      if (item.feedbackArea) {
        let posData = JSON.parse(item.feedbackArea);
        this.map.layer.addPolygonsToLayer(this.polygonLayer, posData, {
          fill: "rgba(255, 255, 255, 0.5)",
          strokeColor: "#000",
          strokeWidth: 2,
        });
      }
    },
    createLayer() {
      setTimeout(() => {
        this.polygonLayer = this.map.layer.createVectorLayer("polygonLayer");
        this.pointLayer = this.map.layer.createVectorLayer("pointLayer");
      }, 1000); // 延迟 1000 毫秒（1秒）后执行
    },
    changeMenu(val) {
      this.map.map.getViewport().style.cursor = "auto";
      this.pointLayer.getSource().clear();
      this.polygonLayer.getSource().clear();
      this.map.interaction.cancelYjDraw();
      if (val == "report") {
        this.isReportShow = true;
        this.isListShow = false;
      } else {
        this.searchList();
        this.isReportShow = false;
        this.isListShow = true;
      }
    },

    showAllAdviceList() {
      this.adviceTableData = this.allAdviceTableData;
    },
    closeDialog() {
      // 通过修改 prop 来关闭弹窗
      this.$emit("update:dialogVisible", false);
    },
    targetSelect() {
      getAttrErrorContentList(this.targetOption).then((res) => {
        this.targetContentList = res.data;
        this.contentOption = this.targetContentList[0].adviceContentId;
      });
    },
    searchList() {
      QueryFeedbackSuggestList(this.searchKeyWords).then((res) => {
        this.UnProcessedAdviceTableData = [];
        this.ProcessedAdviceTableData = [];
        this.adviceTableData = [];
        res.data.forEach((item) => {
          if (item.isHandle == "未处理") {
            this.UnProcessedAdviceTableData.push(item);
          } else {
            this.ProcessedAdviceTableData.push(item);
          }
        });
        this.adviceTableData = this.UnProcessedAdviceTableData;
      });
    },
    addMarker(item) {
      this.map.marker.addMarker(
        item.lon || item.center[0],
        item.lat || item.center[1],
        this.pointLayer,
        {
          scale: 0.5, //大小
          radius: 5,
          pBorderColor: "#000000",
          pBorderWidth: 1,
          pFillColor: "",
        },
        item
      );
    },
    // 获取区域按钮点击事件
    getArea() {
      //   this.map.interaction.cancelYjDraw();
      this.map.map.getViewport().style.cursor = "auto";
      this.map.interaction.addAreaDraw("Polygon", 1);
      //获取绘制图层中的集合面的顶点坐标
      let geom = this.map.interaction.getGeometryCollection();
      let actualGeomArray = Array.prototype.slice.call(geom);
      let actualGeom = actualGeomArray[0];

      let geomSum = [];
      geom.forEach((item) => {
        geomSum.push(...item.getCoordinates());
      });
    },
    // 获取点按钮点击事件
    getPoint() {
      // 移除现有的单击事件监听器
      this.pointLayer.getSource().clear();
      if (this.getPointListener) {
        this.map.map.un("singleclick", this.getPointListener);
      }
      // 改变鼠标样式为十字光标
      this.map.map.getViewport().style.cursor = "crosshair";
      // 添加地图点击事件监听器
      this.getPointListener = (event) => {
        this.map.map.getViewport().style.cursor = "auto";
        const coordinate = event.coordinate;
        // 存储点击位置的经纬度
        this.selectedCoordinates = {
          lon: coordinate[0],
          lat: coordinate[1],
        };
        this.addMarker(this.selectedCoordinates);
        // 点击后移除事件监听器
        this.map.map.un("singleclick", this.getPointListener);
      };
      this.map.map.on("singleclick", this.getPointListener);
    },
    //重置纠错列表
    resetAdvice() {
      this.targetOption = "";
      this.contentOption = "";
      this.areaMarkText = "";
      this.adviceNoteText = "";
      this.selectedCoordinates = {
        lon: "",
        lat: "",
      };
    },
    //保存纠错列表相关内容
    submitAdvice() {
      let params = {
        adviceContentId: this.contentOption,
        adviceFeedbackRemark: this.adviceNoteText,
        adviceObjId: this.targetOption,
        feedbackArea: this.areaMarkText,
        feedbackPointerX: this.selectedCoordinates.lon,
        feedbackPointerY: this.selectedCoordinates.lat,
        reportDepartment: "管网测绘科",
        reportPerson: JSON.parse(localStorage.getItem("userInfo")).username,
      };
      saveAttrErrorContent(params).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          //   this.resetAdvice();
        }
      });
    },
    //反馈纠错各种类型数据
    processAdviceData() {
      getFeedbackSuggestList().then((res) => {
        this.allAdviceTableData = res.data;
        this.adviceTableData = this.allAdviceTableData;
        // 初始化处理过的和纠错列表数组
        this.ProcessedAdviceTableData = [];
        this.UnProcessedAdviceTableData = [];

        // 遍历所有纠错数据
        this.allAdviceTableData.forEach((item) => {
          if (item.isHandle === "已处理") {
            // 如果 isHandle 是 '已处理'，则添加到 ProcessedAdviceTableData 数组
            this.ProcessedAdviceTableData.push(item);
          } else {
            // 否则添加到 UnProcessedAdviceTableData 数组
            this.UnProcessedAdviceTableData.push(item);
          }
        });
      });
    },
    //刷新列表情况
    resetTable() {
      this.searchKeyWords = "";
      this.searchList();
      this.pointLayer.getSource().clear();
      this.polygonLayer.getSource().clear();
    },
  },

  mounted() {
    this.initMap();
    this.createLayer();
    getAttrErrorList().then((res) => {
      this.suggestTargetList = res.data;
      this.targetOption = this.suggestTargetList[0].adviceObjId;
      this.targetSelect();
    });
    this.processAdviceData();
  },
  beforeDestroy() {
    if (this.map) {
      this.map.map.getViewport().style.cursor = "auto";
      this.pointLayer.getSource().clear();
      this.polygonLayer.getSource().clear();
      this.map.interaction.cancelYjDraw();
      this.map.map.removeLayer(this.pointLayer);
      this.map.map.removeLayer(this.polygonLayer);
    }
  },
};
</script>

<style lang="scss" scoped>
.toolDialogContainer {
  width: 25vw;
  color: white;
  position: absolute;
  top: 5vh;
  right: -79vw;
  height: 46vh;
  z-index: 2;
  .toolDialogTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 1rem;
    background-color: #285383;
    .title-left,
    .title-right {
      display: flex;
      align-items: center;
    }
    .bar {
      width: 5px; /* 小竖条的宽度 */
      height: 20px; /* 小竖条的高度 */
      background-color: white; /* 小竖条的颜色 */
      margin-right: 10px; /* 小竖条和文字之间的间距 */
    }
    .icon {
      width: 20px; /* 小方框的宽度 */
      height: 20px; /* 小方框的高度 */
      // border: 1px solid #4998f2; /* 小方框的边框 */
      margin-left: 5px; /* 小方框之间的间距 */
    }
    .icon:hover {
      color: #4998f2;
    }
    .icon:focus {
      color: #4998f2;
    }
  }
  .toolDialogContent {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #285383;
    font-size: 0.8rem;
    .contentButton {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px; /* 与下半部分内容的间距 */
      .menuButton {
        width: 50%;
        text-align: center;
      }
      .menuButton.active {
        // color: rgb(8, 46, 82);
        border-bottom: 2px solid white;
      }
    }
    .contentBox {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      .formRow {
        display: flex;
        // align-items: center;
        margin-bottom: 10px;

        .search_input {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          input {
            width: 80%;
            font-size: 0.8rem;
            outline: none;
            border-radius: 3px;
            border: none;
            height: 1.2rem;
          }
        }
      }
      .formRow1 {
        background-color: #4070a2;
        .search_label {
        }
        .showAllList {
          margin-left: 15vw;
        }
      }
      .formRowPoint {
        display: flex;
        .columnLabel {
          display: flex;
          flex-direction: column;
          .label {
            display: flex;
            .label_text {
              width: 100px;
              margin-right: 10px;
            }
            .coordinate-input {
              margin-left: 88px;
              margin-top: 0.25rem;
              background-color: #4070a2;
              border: none;
              color: white;
            }
          }
        }
      }
      .formTable {
        table {
          border-collapse: collapse;
          border: 1px solid white;
          width: 23vw;
          height: 30vh;
          overflow: auto;
          .table-cell {
            height: 5vh;
          }
          .table-row {
            display: table-row;
          }
        }

        table tbody tr {
          border: 1px solid white;
        }

        table td {
          overflow: auto;
          line-height: 5vh;
        }
      }
      .label {
        width: 100px;
        margin-right: 10px;
      }
      .control {
        flex-grow: 1;
        .pickup-btn {
          width: 20%;
          margin-left: 1rem;
        }
        .pickup-btn1 {
          margin-left: 12.3rem;
        }
        .smallBtn {
          width: 4.5rem;
          margin-left: 88px;
        }
        .data-container {
          display: flex;
          justify-content: space-between;
          background-color: #4070a2;
          border-bottom: 1px solid white;
          .delBtn {
            display: flex;
            button {
              cursor: pointer;
            }
          }
        }
        .data-container:hover {
          background-color: #03366c;
        }
      }

      select,
      textarea,
      button {
        width: 100%;
        color: white !important;
        background-color: #4070a2;
        border: none; /* 去除边框 */
        outline: none; /* 去除焦点时的轮廓线 */
        font-size: 0.8rem;
        height: 1.5rem;
      }

      button {
        margin-right: 10px; /* 按钮之间的间距 */
      }
      button:hover {
        background-color: #4998f2;
      }
      button:focus {
        background-color: #4998f2;
      }
      textarea {
        height: 5rem;
      }

      /* 最后一行的按钮不需要 label，可以单独设置样式 */
      .formRow:last-child {
        justify-content: flex-end;
      }

      .formRow:last-child .button {
        margin-left: 10px; /* 按钮之间的间距，而不是右边距 */
      }
    }
  }
}
</style>
